<template>
    <van-list v-model:loading="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
        <van-skeleton :animate="false">
            <template #template>
                <div :style="{ display: 'flex', width: '100%' }">
                    <div :style="{ flex: 1, marginLeft: '16px' }">
                        <div v-for="(item, index) in res.value" :key="index" class="main">
                            <div class="cominfo">
                                <span>
                                    <img :src="item.userInfo.avatarUrl" alt="" class="imgs" style="border-radius: 50%;"
                                        v-show="isShow" />
                                    {{ item.userInfo.nickName }}</span>
                                <span> {{ item.addTime }}</span>
                            </div>
                            <div>
                                {{ item.content }}
                            </div>
                            <div :key="item">
                                <img :src="item" alt="" v-for="(item, index) in item.picList" :key="index" class="imgs" />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </van-skeleton>
    </van-list>
</template>
<script>
import { ref } from "vue";
import { IComment } from "../api/request.js";

export default {
    name: 'All',
    props: {
        res: {
            type: Object,
            default: () => ref([]),
        },
        limit: { type: Number, default: 10 },
        types: { type: Number, default: 0 },
        isShow: { type: Boolean, default: false },
        goodid: { type: Number, default: 0 },
    },

    setup(props) {
        const loading = ref(false);
        const finished = ref(false);
        const onLoad = () => {
            const comments = []; // 用于存储所有页面的评论数据
            const paramss = { // 请求参数
                type: 0,
                valueId: props.goodid,
                showType: props.types,
                page: 1,
                limit: props.limit,
            };
            if (props.limit == 2) {
                IComment("/wx/comment/list", { params: paramss }).then(res => {
                    console.log(res);
                    props.res.value = res.list.slice(0, 2);
                    finished.value = true;
                });
            } else {
                IComment("/wx/comment/list", { params: paramss }).then(res => {
                    comments.push(...res.list); // 将第一页的数据存储到数组中
                    const requests = []; // 用于存储所有页面的 Promise 请求
                    for (let i = 2; i <= res.pages; i++) { // 从第二页开始请求
                        paramss.page = i;
                        requests.push(IComment("/wx/comment/list", { params: paramss }));
                    }
                    Promise.all(requests).then(responses => { // 所有请求完成后
                        for (const response of responses) {
                            comments.push(...response.list); // 将每一页的数据存储到数组中
                        }
                        loading.value = false;
                        props.res.value = comments
                        console.log(comments);
                        if (comments.length >= res.total) {
                            finished.value = true;
                        }
                    });
                });
            }
        };
        return {
            onLoad,
            loading,
            finished,
        };
    },

}
</script>
<style>
.cominfo {
    display: flex;
    justify-content: space-between;
}

.cominfo span {
    display: flex;
}
</style>
